<template>
  <div class='app-container'>
    <div class='button-container'>
      <el-button class='filter-item' type='primary' @click="addTask"><i class="el-icon-plus"></i> 添加</el-button>
      <!-- <el-button class='filter-item' type='primary' @click="editTask(currentSelectedRow)" icon="edit">变更</el-button>
        <el-button class='filter-item' type='primary' @click="deleteTask(currentSelectedRow)" icon="delete">停用</el-button> -->
      <el-button class='filter-item' type='primary' @click="refreshData"><i class="el-icon-loading"></i> 刷新</el-button>
      <el-button class='right' type='primary' @click="quit"><i class="el-icon-caret-left"></i>退出</el-button>
    </div>
    <div>
      <!-- 表格 -->
      <el-table ref="taskTable" @selection-change="onSelectionChanged" :data="GridPageList" v-loading.body="gridDataIsLoading" class="table" element-loading-text="数据加载中..." border fit highlight-current-row>
        <el-table-column align="center" label='#' width="60">
          <template scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="配置ID" width="240">
          <template scope="scope">
            {{scope.row.taskid}}
          </template>
        </el-table-column>
        <el-table-column label="配置名称" width="200">
          <template scope="scope">
            {{scope.row.taskname}}
          </template>
        </el-table-column>
        <el-table-column label="作业模块名" width="160">
          <template scope="scope">
            {{scope.row.taskModule}}
          </template>
        </el-table-column>
        <el-table-column label="作业Action名" width="160">
          <template scope="scope">
            {{scope.row.taskAction}}
          </template>
        </el-table-column>
        <el-table-column label="作业参数" width="200">
          <template scope="scope">
            {{scope.row.taskParam}}
          </template>
        </el-table-column>
        <el-table-column label="作业执行时间表达式" width="200">
          <template scope="scope">
            {{scope.row.taskExpression}}
          </template>
        </el-table-column>
        <el-table-column label="作业说明" width="150">
          <template scope="scope">
            {{scope.row.taskRemark}}
          </template>
        </el-table-column>
        <el-table-column label="最后操作时间" width="150">
          <template scope="scope">
            {{scope.row.updateTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="175">
          <template scope="scope">
            <el-button icon="edit" size="small" type="primary" @click="editTask(scope.row)">编辑</el-button>
            <el-button icon="delete" type="danger" size="small" @click="deleteTask(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-show="!gridDataIsLoading" class="pagination-container">
      <el-pagination @size-change="onPageSizeChanged" @current-change="onPageNoChanged" :current-page.sync="paginationConfig.currentQueryPage" :page-sizes="[10,20,30, 50]" :page-size="paginationConfig.selectedPageSize" layout="total, sizes, prev, pager, next, jumper" :total="dataCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'task',
  data() {
    return {
      gridDataSource: [],
      // 当前分页数据开始index
      startIndex: 0,
      // 当前分页数据结束index
      endIndex: 0,
      gridDataIsLoading: false,
      currentSelectedRow: null,
      addTaskDislogOpened: false,
      paginationConfig: { selectedPageSize: 10, currentQueryPage: 0 },
      newtask: {
        taskid: '',
        taskname: '',
        taskRemark: '',
        taskModule: '',
        taskAction: '',
        taskParam: '',
        taskExpression: '',
        taskmoduleId: ''
      },
      edittask: {
        taskid: '',
        taskname: '',
        taskRemark: '',
        taskModule: '',
        taskAction: '',
        taskParam: '',
        taskExpression: '',
        IsDeleted: ''
      },
      taskmodules: [],
      taskModule: '',
      uuid: ''
    };
  },
  created() {
    this.refreshData();
  },
  methods: {
    /**
       * 刷新数据
       */
    refreshData() {
      this.gridDataIsLoading = true;

      let getTasks = this.$http.get('/TaskConfig/GetAllTaskConfig').then((response) => {
        if (response.data.isSuccess) {
          this.gridDataSource = response.data.taskConfigList;
          this.paginationConfig.currentQueryPage = 1;
        }
        this.paginationConfig.currentQueryPage = 0;
      });

      this.$http.all([getTasks]).then(() => {
        this.gridDataIsLoading = false;
      }).catch(() => {
        this.gridDataIsLoading = false;
      });
    },
    computeDataIndex(pageNo, pageSize) {
      this.startIndex = pageSize * (pageNo - 1) + 1;
      this.endIndex = this.startIndex + pageSize;
      console.log(this.startIndex);
      console.log(this.endIndex);
    },
    /**
     * 分页变化
     */
    onPageSizeChanged(size) {
      this.paginationConfig.selectedPageSize = size;
      this.computeDataIndex(this.paginationConfig.currentQueryPage, size);
    },
    onPageNoChanged(page) {
      this.paginationConfig.currentQueryPage = page;
      this.computeDataIndex(page, this.paginationConfig.selectedPageSize);
    },
    /**
     * 表格selectchanged
     */
    onSelectionChanged(select) {
      this.currentSelectedRow = select;
    },
    /**
   * 查询模块名
   */
    taskModuleQuery() {
      this.$http.get('/TaskConfig/GetAllTaskModuleConfig').then((response) => {
        if (response.data.isSuccess) {
          this.taskmodules = response.data.taskModuleList;
        }
      });
    },
    /**
       * 删除任务
       */
    deleteTask(row) {
      let taskId = row.taskid;
      if (taskId) {
        this.$confirm('是否确定删除该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/TaskConfig/SaveTaskConfig',
            {
              taskid: row.taskid,
              taskname: row.taskname,
              taskRemark: row.taskRemark,
              taskModule: row.taskModule,
              taskAction: row.taskAction,
              taskParam: row.taskParam,
              taskExpression: row.taskExpression,
              taskmoduleId: row.taskmoduleId,
              IsDeleted: '1'
            }).then((response) => {
              if (response.data.isSuccess) {
                this.$message({
                  message: '停用成功!',
                  type: 'success'
                });
                if (response.data) {
                  this.gridDataSource.push(response.data.edittask);
                }
                this.edittask = {
                  taskname: '',
                  taskRemark: '',
                  taskModule: '',
                  taskAction: '',
                  taskParam: '',
                  taskExpression: '',
                  taskmoduleId: '',
                  IsDelete: ''
                };
                this.editTaskDislogOpened = false;
                this.refreshData();
              } else {
                this.$message({
                  message: '数据提交出现错误,请稍后重试!',
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message({
                message: '数据提交出现错误,请稍后重试!',
                type: 'error'
              });
            });
        }
          );
      }
  },
  /**
      * 退出
      */
  quit() {
    this.$router.push({ path: '/home/dashboard' });
  },
  /**
      * 新增任务
      */
  addTask() {
    this.$router.push({ path: '/taskmanager/addtask' });
  },
  /**
      * 变更任务
      */
  editTask(row) {
    this.taskModuleQuery();
    this.edittask = {
      taskid: row.taskid,
      taskname: row.taskname,
      taskRemark: row.taskRemark,
      taskModule: row.taskModule,
      taskAction: row.taskAction,
      taskParam: row.taskParam,
      taskExpression: row.taskExpression
    };
    console.log(this.edittask.taskid);
    let taskDataId = this.edittask.taskid;
    this.$router.push({ path: '/taskmanager/addtask', query: { id: taskDataId } });
  }
},
computed: {
  GridPageList() {
    if (this.gridDataSource && this.gridDataSource.length > 0) {
      if (this.startIndex > 0 && this.endIndex > 0) {
        return this.gridDataSource.slice(this.startIndex - 1, this.endIndex - 1);
      } else {
        return [];
      }
    } else {
      return [];
    }
  },
  dataCount() {
    if (this.gridDataSource) {
      return this.gridDataSource.length;
    } else {
      return 0;
    }
  }
}
};
</script>
<style>
.title {
  width: 100%;
  padding: 15px;
  border: 1px solid gray;
  margin: 0px;
  background: GhostWhite;
}

.drag-header {
  width: 100%;
  padding: 10px;
  border: 1px solid gray;
  margin: 0px;
}

.right {
  float: right;
  padding: 10px;
}

.set {
  float: right;
  padding: 1px;
}

.input {
  width: 200px;
}

.table {
  max-height: 700px;
  overflow: auto;
}

.tt {
  Height: 200px;
  width: 600px;
}
</style>

